<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <link rel="stylesheet" href="mainPageCss.css" type="text/css"></link>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>GooWhere?</title>

        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAeAEGK0sG98X2-qp5i1ao3hTwM0brOpm-All5BF6PoaKBxRWWERQh_9CCx4yOeR8PfepCWNA80vfLWw" type="text/javascript"></script>

        <script type="text/javascript" src="/GooWhere/json.js"></script>


        <script type="text/javascript">

            var map;
            var marker;
            var polyline;
            var lineCounter = 1;
            var moneyLeft = 0;
            var destLat,destLng;
            var startLat;
            var startLng;
            var goalLat;
            var goalLng;
            var curLocation;

            var curScore = ${sessionScope.curScore};
            var curLevel = ${sessionScope.levelNum};
            var updateTrans = "";
            var clueNumber = 1;
            var availableClues = 0;
            var playerName="${sessionScope.currentUser}";
            var playerPicture="${sessionScope.picture}";

            

            function initGame() {
                //go to whatever highest level the user reached
                updateIsOnline(playerName, 1);
                goToLevel(curLevel);
                pausecomp(2000);
                setInterval ( "loadLiveFriends()", 5000 );
            }

            //updates player online status when logging on or off
            function updateIsOnline(playerName,isOnline){
                //Goes to servlet and updates the player online status info
                var url = "PlayerOnlineStatusServlet?userName=" + playerName + "&isOnline=" +isOnline;
                if (typeof XMLHttpRequest != "undefined") {
                    req = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                req.open("GET", url, true);
                req.onreadystatechange = isonlinerequestcallback;
                req.send(null);
            }

            //temp
            function isonlinerequestcallback() {
            }

            //load the google map and display it to screen.
            function loadMap() {
                if (GBrowserIsCompatible()) {
                    var twoHrsLater = new Date();
                    twoHrsLater.setTime(twoHrsLater.getTime()+2*60*60*1000); //set the countdown to 2 hour for every level for now
                    countdown(twoHrsLater.getFullYear(),twoHrsLater.getMonth()+1,
                    twoHrsLater.getDate(),twoHrsLater.getHours(),
                    twoHrsLater.getMinutes(),twoHrsLater.getSeconds());

                    map = new GMap2(document.getElementById("map_canvas"));

                    map.setCenter(new GLatLng(startLat, startLng), 15); //startLat & startLng is the starting location of each level
                    marker = new GMarker(map.getCenter());              //depending on the highest level the user reaches
                    marker.bindInfoWindowHtml("<html>You are at<br><b>" + window.curLocation + "</b>.</html>"); //tells the user's current location

                    polyline = new GPolyline([new GLatLng(startLat, startLng)],"#ff0000", 15);

                    map.addOverlay(marker);
                    map.addOverlay(polyline);
                    map.setUIToDefault();

                    document.getElementById("status_data_money").innerHTML = moneyLeft; //set the amount of starting money
                    document.getElementById("status_data_point").innerHTML = curScore; //set the score the user has from last time he logs out
                    document.getElementById("level_window_data").innerHTML = 'LEVEL ' + curLevel; //change the level label on the left
                }
            }

            //This function is called when the user clicks the direction control at the bottom of the screen
            //go to direction, north, east, south, west, northeast, southeast, southwest and northwest
            function direction(dir){

                if (dir != "center") {
                    if(document.getElementById("loading").style.display == 'none'){
                        showLoadingWindow();
                        closeAllWindow();
                    }
                    //Goes to servlet and get what waypoints is available in such direction
                    var url = "MainController?dir=" + dir + "," + marker.getLatLng().lat() + "," + marker.getLatLng().lng();
                    if (typeof XMLHttpRequest != "undefined") {
                        req = new XMLHttpRequest();
                    } else if (window.ActiveXObject) {
                        req = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    req.open("GET", url, true);
                    req.onreadystatechange = transportcallback;
                    req.send(null);
                }
                else {
                    //recenter map when user clicked center button
                    map.panTo(marker.getLatLng());
                }
            
            }

            //get transportation list avaiable and render as html.
            function transportcallback() {
                if (req.readyState == 4) {
                    if (req.status == 200) {
                        var trans = req.responseText;

                        closeLoadingWindow();

                        //the request returns a string in the format of either "No transportation available from such location." when there's no waypoint in that direction
                        // or "transportationType,latitude&longitude,costperkm,speedperkm,locationName;"
                        if (trans!="No transportation available from such location."){
                            clearTransTable();
                            var diffTrans = trans.split(";");
                            for (var i=0;i<diffTrans.length;i++) {
                                var transArr = diffTrans[i].split(",");
                                var type = transArr[0];
                                    
                                if (type == "walking")
                                    type = "walk";
                                else if (type == "skytrain")
                                    type = "train";
                                updateTrans+=type+",";
                                var destination = transArr[1].split("&");
                                destLat = destination[0]; //set global var so that travel function can retrieve it
                                destLng = destination[1]; //this sets the destination lat & long
                                var costperkm = transArr[2];
                                var speedperkm = transArr[3];
                                if (isNaN(speedperkm)){ //speedperkm can
                                    document.getElementById("message_window").style.display = 'block';
                                    document.getElementById("message").innerHTML = "Please retry.";
                                    destination = null;
                                    break;
                                }
                                curLocation = transArr[4];

                                var curLat = marker.getLatLng().lat();
                                var curLng = marker.getLatLng().lng();

                                var kmToGo = distance(destLat,destLng,curLat,curLng);

                                addTransCell(curLocation,Math.round((kmToGo / speedperkm)*10000)/10000,Math.round((costperkm * kmToGo) *100)/100,Math.round(kmToGo*10000)/10000,type);
                            }
                            if(destination != null){
                                closeLoadingWindow();
                                document.getElementById("transportation").style.display = 'block'; //Display Transportation Window
                            }

                        } else {
                            closeLoadingWindow();
                            document.getElementById("message_window").style.display = 'block';
                            document.getElementById("message").innerHTML = trans; //shows no transportation available
                        }
                    }
                }
            }

            // add each avaliable transportation option to transportation pop-up window.
            function addTransCell(destinationName,timeTaken,cost,distance,type){
                //add Rows to transporation table dynamically according to the param
                var transTbl = document.getElementById("transTbl");
                var row = document.createElement("tr");
                row.setAttribute("onclick", "travel(document.getElementById('trans_"+type+"_data_second').innerHTML,document.getElementById('trans_"+type+"_data_first').innerHTML)");
                var cell = document.createElement("td");
                var img;

                if (type=='walk'){
                    img = 'r2_c2';
                } else if (type=='bus') {
                    img = 'r4_c2';
                } else if (type=='train'){
                    img = 'r6_c2';
                } else if (type=='taxi'){
                    img = 'r8_c2';
                }
                cell.setAttribute("colspan",2);
                cell.setAttribute("onmouseout", "MM_swapImgRestore()");
                cell.setAttribute("onmouseover", "MM_swapImage('trans_window_"+type+"','','GUI/images/trans_window/trans_window_over_"+img+".png',1)");
                var framediv = document.createElement("div");
                framediv.setAttribute("id","tran_opt_frame");
                framediv.innerHTML="<img src='GUI/images/trans_window/trans_window_"+img+".png' name='trans_window_"+type+"' width='293' height='72' border='0'/>";
                var firstdiv = document.createElement("div");
                firstdiv.setAttribute("class", "trans_window_data");
                firstdiv.setAttribute("id", "trans_"+type+"_data_first");
                firstdiv.innerHTML = timeTaken + "hr";
                var secdiv = document.createElement("div");
                secdiv.setAttribute("class", "trans_window_data");
                secdiv.setAttribute("id", "trans_"+type+"_data_second");
                secdiv.innerHTML = cost;
                var thirddiv = document.createElement("div");
                thirddiv.setAttribute("class", "trans_window_data");
                thirddiv.setAttribute("id", "trans_"+type+"_data_third");
                thirddiv.innerHTML = distance;
                var fourdiv = document.createElement("div");
                fourdiv.setAttribute("class", "trans_window_data");
                fourdiv.setAttribute("id", "trans_"+type+"_data_fourth");
                fourdiv.innerHTML = destinationName;

                framediv.appendChild(firstdiv);
                framediv.appendChild(secdiv);
                framediv.appendChild(thirddiv);
                framediv.appendChild(fourdiv);
                cell.appendChild(framediv);
                row.appendChild(cell);
                transTbl.appendChild(row);
            }
            
            //clean up transportation window for next location display.
            function clearTransTable(){
                var table = document.getElementById("transTbl");
                while (table.hasChildNodes()){
                    table.removeChild(table.firstChild);
                }
            }

            // calcualte and return the distance between 2 points (in km) on the map.
            function distance(lat1, lon1, lat2, lon2) {
                //calculate the distance between 2 latlng
                var radlat1 = Math.PI * lat1/180;
                var radlat2 = Math.PI * lat2/180;
                var radlon1 = Math.PI * lon1/180;
                var radlon2 = Math.PI * lon2/180;
                var theta = lon1-lon2;
                var radtheta = Math.PI * theta/180;
                var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
                dist = Math.acos(dist);
                dist = dist * 180/Math.PI;
                dist = dist * 60 * 1.1515;
                dist = dist * 1.609344;
                return dist
            }

            //Does the actual travel from a startlat,startlng to the location user selected
            function travel(cost,timeReq){
                closeTransWindow();

                //get the current money left for the user
                var curmoney = document.getElementById("status_data_money").innerHTML;
                //update user's money left
                curmoney -= cost;
                if (curmoney<0){ //Tell user if he doesn not have sufficient funds
                    document.getElementById("message_window").style.display = 'block';
                    document.getElementById("message").innerHTML = "You do not have enough money!";
                    return;
                } else
                    document.getElementById("status_data_money").innerHTML = Math.round(curmoney*100)/100;

                //deduct time according to the time the transportation takes
                var timeLeft = document.getElementById("status_time").innerHTML;
                hour=timeLeft.split(":")[0];min=timeLeft.split(":")[1];sec=timeLeft.split(":")[2];
                if ((hour*60*60+min*60+sec)>0){
                    //convert timeReq to hr & min &sec
                    timeReq = timeReq.substring(0,timeReq.indexOf('hr'));
                    var minusHr = Math.floor(timeReq);
                    var minusMin = Math.floor((timeReq-minusHr)*60);
                    var minusSec = Math.floor(((timeReq-minusHr)*60-Math.floor((timeReq-minusHr)*60))*60);

                    var totalMinusSec = minusHr*60*60 + minusMin*60 + minusSec;
                
                    curTime = new Date();
                    curTime.setTime(curTime.getTime()+hour*60*60*1000 + min*60*1000 + sec*1000);
                    curTime.setTime(curTime.getTime()-totalMinusSec*1000);
                    countdown(curTime.getFullYear(),curTime.getMonth()+1,curTime.getDate(),curTime.getHours(),curTime.getMinutes(),curTime.getSeconds());
                } else {
                    document.getElementById("message_window").style.display = 'block';
                    document.getElementById("message").innerHTML = "You do not have any time left!";
                    return;
                }

                //recenter map to destination
                var latlng = new GLatLng(destLat,destLng);
                map.removeOverlay(marker); //remove prev marker

                //draw line to show history
                polyline.insertVertex(lineCounter++, latlng);
                map.addOverlay(polyline);

                //create a marker for the new location
                marker = new GMarker(latlng);
                marker.bindInfoWindowHtml("<html>You are at<br><b>" + curLocation + "</b>.</html>");
                map.addOverlay(marker);
                map.panTo(latlng);

                if (destLat == goalLat && destLng == goalLng){
                    //user has reached the goal!!
                    document.getElementById("message_win_window").style.display = 'block';
                    //update score
                    timeLeft = document.getElementById("status_time").innerHTML;
                    hour=timeLeft.split(":")[0];min=timeLeft.split(":")[1];sec=timeLeft.split(":")[2];
                    totalTimeLeft = hour*60+min+(0.1)*sec;
                    curmoney = document.getElementById("status_data_money").innerHTML;
                    curScore += Math.round((curLevel/5)*(totalTimeLeft+curmoney*100));
                    document.getElementById("status_data_point").innerHTML = Math.round(curScore);
                    //head to NEXT level~
                    curLevel++;
                    updatePlayer(playerName,curLevel,curScore);
                    goToLevel(curLevel);
                }
            }

            //updates player after completing a level
            function updatePlayer(playerName,curLevel,score){
                //Goes to servlet and updates the player info
                var url = "PlayerUpdateServlet?userName=" + playerName + "&curLevel=" +curLevel+"&curScore="+score;
                if (typeof XMLHttpRequest != "undefined") {
                    req = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                req.open("GET", url, true);
                req.onreadystatechange = updaterequestcallback;
                req.send(null);
            }

            //temp, do not delete.
            function updaterequestcallback() {
            }


            //Goes to servlet and update the next level status ie starting & ending locations
            function goToLevel(lev) {
                curLevel=lev;
                var url = "MainController?level=" + lev;
                if (typeof XMLHttpRequest != "undefined") {
                    req = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                req.open("GET", url, true);
                req.onreadystatechange =  levelcallback;
                req.send(null);
            }

            //get levels and render into html.
            function levelcallback() {
                if (req.readyState == 4) {
                    if (req.status == 200) {
                        var info = req.responseText;
                        //set global variables for other functions to access
                        startLat=info.split(",")[0];
                        startLng = info.split(",")[1];
                        goalLat = info.split(",")[2];
                        goalLng = info.split(",")[3];
                        moneyLeft = info.split(",")[4];
                        curLocation = info.split(",")[5];

                        //update the game_start.jsp to allow user to return to previous levels
                        //this adds the newest level info
                        var levelrow = document.getElementById("game_start_level_"+curLevel);

                        //this only creates the button available for the highest level
                        levelrow.setAttribute("onmouseout", "MM_swapImgRestore()");
                        levelrow.setAttribute("onmouseover", "MM_swapImage('game_start_level_"+curLevel+"','','GUI/images/game_start/game_start_over_r"+(curLevel*2+1)+"_c2.png',1);this.style.cursor='pointer';");
                        levelrow.setAttribute("onclick", "goToLevel("+curLevel+");loadMap();closeGameStartWindow();");
                        levelrow.innerHTML = "<img src='GUI/images/game_start/game_start_r"+(curLevel*2+1)+"_c2.png' name=game_start_level_"+curLevel+" width='219' height='34' border='0'/>";

                        //enable level button any lower level above 1
                        var i = 2;
                        for (i = 2; i<curLevel;i++) {
                            var ilevelrow = document.getElementById("game_start_level_"+i);
                            ilevelrow.setAttribute("onmouseout", "MM_swapImgRestore()");
                            ilevelrow.setAttribute("onmouseover", "MM_swapImage('game_start_level_"+i+"','','GUI/images/game_start/game_start_over_r"+(i*2+1)+"_c2.png',1);this.style.cursor='pointer';");
                            ilevelrow.setAttribute("onclick", "goToLevel("+i+");loadMap();closeGameStartWindow();");
                            ilevelrow.innerHTML = "<img src='GUI/images/game_start/game_start_r"+(i*2+1)+"_c2.png' name=game_start_level_"+i+" width='219' height='34' border='0'/>";
                        }
                        loadMap();
                    }
                }
            }

            //user logout and request user for confirmation.
            function logout(){
                //clean up screen
                closeAllWindow();

                document.getElementById("message_window_confirm").style.display = 'block';
                document.getElementById("message_confirm").innerHTML = "Are you sure you want to logout?";
            }

            //logout user and return to login page.
            function logoutGame(){
                updateIsOnline(playerName,0);
                //go back to login.jsp and clear all the session attribute
                curScore=0;
                curLevel=1;
                playerName="";
                startLat=null;
                startLng=null;
                //send AJAX request to servlet and tell it to invalidate the HTTPSession
                var url = "PlayerSigninServelet?logout=true";
                if (typeof XMLHttpRequest != "undefined") {
                    req = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                req.open("GET", url, true);
                req.onreadystatechange =  logoutcallback;
                req.send(null);
            }

            function logoutcallback() {
                //after the session is invalidated, go back to login.jsp
                location.href = "/GooWhere";
            }

            //close transportation window.
            function closeTransWindow() {
                document.getElementById("transportation").style.display = 'none';
            }

            //display clue window.
            function display_clue(){
                closeAllWindow();
                getclues(curLevel);
                document.getElementById("clue_window").style.display = 'block';

            }

            //display level window.
            function displayGameStartWindow(){
                closeAllWindow();
                document.getElementById("game_start_window").style.display = 'block';
            }

            //close clue window.
            function closeClueWindow() {
                document.getElementById("clue_window").style.display = 'none';
            }

            //close game level window.
            function closeGameStartWindow(){
                document.getElementById("game_start_window").style.display = 'none';
            }

            //close message window.
            function closeMessageWindow(){
                document.getElementById("message_window").style.display = 'none';
            }

            // close comfirmation message window.
            function closeConfirmationMessageWindow(){
                document.getElementById("message_window_confirm").style.display = 'none';
            }

            // close gameover window.
            function closeLostWindow() {
                document.getElementById("message_lost_window").style.display = 'none';
                //bring user to the beginning of his level
                loadMap();
            }

            // close game win window.
            function closeWinWindow() {
                document.getElementById("message_win_window").style.display = 'none';
                //bring user to the beginning of next level
                loadMap();
            }

            // clean up screen, close all opened window.
            function closeAllWindow() {
                document.getElementById("transportation").style.display = 'none';
                document.getElementById("clue_window").style.display = 'none';
                document.getElementById("game_start_window").style.display = 'none';
                document.getElementById("message_window").style.display = 'none';
                document.getElementById("message_lost_window").style.display = 'none';
                document.getElementById("message_win_window").style.display = 'none';
                document.getElementById("acct_window").style.display = 'none';
            }

            // display account window, display user profile infomation.
            function showAcct(){
                document.getElementById('acct_player_name').innerHTML = playerName;
                document.getElementById('profile_panel_acct_name').innerHTML = "Player Name: " +playerName;
                var url = "PlayerServlet?username=" + playerName;
                var getdate = new Date();
                if (typeof XMLHttpRequest != "undefined") {
                    req = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                req.open("GET", url + "&ms=" + getdate.getTime(), true);
                req.onreadystatechange = playerrequestcallback;
                req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                req.send(null);
                
            }

            //get user account infomationa and render them into html
            function playerrequestcallback() {
                showLoadingWindow();
                if (req.readyState == 4) {
     
                    var info = req.responseText;
 
                    var curLevel = renderString(info.split(",")[1].split(":")[1]);
                    var curScore = renderString(info.split(",")[2].split(":")[1]);
                    var curpicture = renderString(info.split(",")[3].split(":")[1]);
                    var email = renderString(info.split(",")[4].split(":")[1]);
                    var password = renderString(info.split(",")[5].split(":")[1]);

                }
                document.getElementById("acct_player_level_num").innerHTML = "Level: " + curLevel;
                document.getElementById("acct_player_points").innerHTML = "Score: " + curScore;
                document.getElementById('acct_player_image').innerHTML = "<img src=GUI/images/account/player_"+curpicture+".png></img>";
                document.getElementById('acct_player_level').innerHTML = "<img src=GUI/images/account/level_"+curLevel+".png></img>";
                //updates the My Profile screen
                document.form_reg_email.reg_email.value = email;
                document.form_reg_password.reg_password.value = password;
                document.form_reg_password_confirm.reg_password_confirm.value = password;

                closeLoadingWindow();
                document.getElementById("acct_window").style.display = 'block';
            }

            //render string from query respone to be meaningful to read by user.
            function renderString(input)
            {
                return input.substring(2, input.length - 1);
            }

            //close account window.
            function hideAcct(){
                document.getElementById("acct_window").style.display = 'none';
            }

            //display main loading window.
            function showLoadingWindow()
            {
                document.getElementById("loading_window").style.display = 'block';
                document.getElementById("loading_window_bg").style.display = 'block';
            }
            
            //close main loading window.
            function closeLoadingWindow()
            {
                document.getElementById("loading_window").style.display = 'none';
                document.getElementById("loading_window_bg").style.display = 'none';
            }

            // unlock the next avaliable clue to a levle of game.
            function unlockClue(){
                //clues can only be bought if there are available clues that are locked
                if(availableClues>clueNumber){
                    //clues cost 5 dollars each.
                    var cost = 5;
                    //you can only buy clues if you hav eenough moeny.
                    moneyLeft -= cost;
                    if (moneyLeft<0){
                        document.getElementById("message_window").style.display = 'block';
                        document.getElementById("message").innerHTML = "You do not have enough money!";
                        return;
                    } else{
                        document.getElementById("status_data_money").innerHTML = Math.round(moneyLeft*100)/100;
                        clueNumber++
                        display_clue();
                    }
                }
                //if no clues are avaialbe, then pop message inform there's no clues left.
                else{
                    document.getElementById("message_window").style.display = 'block';
                    document.getElementById("message").innerHTML = "Sorry! There are no more clues to unlock!";
                    return;
                }
            }

            // get the clues within a given level.
            function getclues(level){
                //clean up screen
                closeAllWindow();
                //Goes to servelet and get the clue associated with the level.
                var url = "clues?level=" + level;
                if (typeof XMLHttpRequest != "undefined") {
                    req = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                req.open("GET", url, true);
                req.onreadystatechange = cluerequestcallback;
                req.send(null);
            }

            //get the clues and render them into html.
            function cluerequestcallback() {
                showLoadingWindow();
                if (req.readyState == 4) {
                    var response = req.responseText.parseJSON();
                    var newClueTable = document.getElementById("outerClueTable");

                    // erase existing clues from clues_list
                    while (newClueTable.hasChildNodes()) {
                        newClueTable.removeChild(newClueTable.firstChild);
                    }

                    //only disply clues that have bene unlocked.
                    var clueIterate = 0;
                    availableClues=response.length;

                    //clueNumber stores how many clues has been unlcoekd. If the number of cluse unlock smaller
                    //or same as avaialble clues, then display clues...
                    if(availableClues>=clueNumber)
                        clueIterate = clueNumber;
                    else
                        clueIterate = availableClues;
                    //dynamically create clue elements in table.
                    for (var i = 0; i < clueIterate; i++) {
                        var newClueRow = document.createElement("tr");
                        var newBlockPic = document.createElement("td");
                        newBlockPic.setAttribute("align", "left");
                        newBlockPic.setAttribute("valign", "top");
                        newBlockPic.innerHTML = "<br><img align=\"top\" src=\"GUI/images/clue_window/clue_icon.png\" width=\"50\" height=\"33\" /><br>";
                        var newBlockClue = document.createElement("td");
                        newBlockClue.setAttribute("class", "trans_window_data");
                        newBlockClue.setAttribute("valign", "top");
                        newBlockClue.setAttribute("align", "left");
                        newBlockClue.innerHTML = "<br>" + response[i]["description"] + "<br>";
                        newClueRow.appendChild(newBlockPic);
                        newClueRow.appendChild(newBlockClue);
                        newClueTable.appendChild(newClueRow);
                    }
                    closeLoadingWindow();
                }
                
            }

            //pause the game for a moment to allow all components to be loaded.
            function pausecomp(millis)
            {
                var date = new Date();
                var curDate = null;

                do { curDate = new Date(); }
                while(curDate-date < millis);
            }

        </script>

        <!--The next two lines is for importing functions in clues.js-->
        <!--c:url var="clues_js" value="/scripts/clues.js"/-->
        <!--script type="text/javascript" src="${clues_js}"/-->
        <!-- importing an external js file seems to break google maps! -->
    </head>

    <body onload="initGame()">
        <h1></h1>
        <div id="top_menu"><%@include file="GUI/top_menu.jsp" %></div>
        <div id="stat"><%@include file="GUI/status_window.jsp" %></div>
        <div id="realtime_friends_list"><%@include file="GUI/friends_list.jsp" %></div>
        <div id="level_window"><%@include file="GUI/level_window.jsp" %></div>
        <div id="game_control">
            <div id="clue_control"><%@include file="GUI/clue_control.jsp" %></div>
            <div id="control"><%@include file="GUI/compass.jsp" %></div>
        </div>
        <div id="transportation" style="display:none"><%@include file="GUI/trans_window.jsp" %></div>
        <div id="clue_window" style="display:none"><%@include file="GUI/clue_window.jsp" %></div>
        <div id="game_start_window" style="display:none"><%@include file="GUI/game_start.jsp" %></div>
        <div id="message_window" style="display:none"><%@include file="GUI/message_info.jsp" %></div>
        <div id="message_window_confirm" style="display:none"><%@include file="GUI/message_confirm.jsp" %></div>
        <div id="message_win_window" style="display:none"><%@include file="GUI/message_win.jsp" %></div>
        <div id="message_lost_window" style="display:none"><%@include file="GUI/message_lost.jsp" %></div>
        <div id="loading_screen" style="display:none"><%@include file="GUI/loading.jsp" %></div>
        <div id="acct_window" style="display:none"><%@include file="GUI/account.jsp" %></div>
        <div id="loading_window_bg" style="display:none">
            <table height="100%" width="100%" background="GUI/images/register/bg.png" /></table>
    </div>
    <div id="mainShadeTop"></div>
    <div id="mainShadeBtn"></div>
    <div id="loading_window" style="display:none"><img src="GUI/images/login/goo_load.gif" width="161" height="161" border="0" alt="" /></div>
    <div id ="map_canvas">
    </div>
    <div id="buttons" align="center" style="display:none">
        <button onclick="travel(4,'n',5);">Bus 4km North $5</button><br/>
        <button onclick="travel(6,'e',20);">Taxi 6km East $20</button><br/>
        <button onclick="travel(3.5,'s',5);">Bus 3.5km South $5</button><br/>
        <button onclick="travel(2,'w',20);">Taxi 2km West $20</button><br/><br>

        Testing:
        <button onclick="travel(1,'w',0);">Walk 1km West $0</button><br>
        <button onclick="travel(2,'e',-20);">Earn Money 2km East -$20</button><br>
        <button onclick="travel(2,'e',5001);">Max Amount 2km East $5001</button>
    </div>

</body>
</html>
